<!-- 典型案件查询  -->

<template>
  <div class="typical_case_box"> 

  <a-modal v-model="isShowModal" width="1000px" :bodyStyle="{ height: '500px', overflow: 'auto', zIndex:9999}"  title="类案检索" destroyOnClose>
    
    <a-tabs type="card" v-model="activeKey" @change="tabChange">
      <a-tab-pane :key="0" tab="典型案例"></a-tab-pane>
      <a-tab-pane :key="1" tab="全局案例"></a-tab-pane>
    </a-tabs>

    <a-form layout="inline">
        <a-row :gutter="48">
          <a-col :xxl="24" :lg="24" :sm="24" class="condition_padding">
            <span class="condition_label">筛选条件：</span>
            <a-radio-group v-model="queryMode" name="radioGroup" :default-value="1"  @change="radioChange">
              <a-radio :value="1">
                申请人
              </a-radio>
              <a-radio :value="2">
                被申请人
              </a-radio>
              <a-radio :value="3">
                案由
              </a-radio>
            </a-radio-group>
          </a-col>
        </a-row>
        <a-row :gutter="48" v-if="activeKey == 0">
          <a-col :xxl="24" :lg="24" :sm="24"  class="condition_padding">
            <span class="condition_label">分类标签：</span>
            <a-select v-model="classify" style="width: 250px;height: 40px;" placeholder="请选择分类标签" allow-clear @change="typicalChange">
              <a-select-option v-for="typical in typicalEnums" :key="typical.name" >
                {{ typical.name }}
              </a-select-option>
            </a-select>

          </a-col>
        </a-row>
    </a-form>

    <div class="table_div" style="margin-top:20px">

      <a-table
        :scroll="{ x: 1000, y: 550 }"
        :columns="ucolumns"
        :data-source="listData"
        :pagination="upagination"
        :loading="loading"
        rowKey="applyid"
        @change="tableChange"
        size="middle"
        :bordered="ubordered"
      >
        <span slot="serial" slot-scope="text, record, index">
          {{ (upagination.current - 1) * upagination.pageSize + parseInt(index) + 1 }}
        </span>

        <div slot="similarySlot" slot-scope="text, record" class="beyond_hiding" style="width: 100%">
          <a-tooltip placement="topLeft">
            <template slot="title">
              <span>{{ transSimilary(record) }}</span>
            </template>
            <span style="color:#0072C6">{{ transSimilary(record) }}</span>
          </a-tooltip>
        </div>


        <div slot="acceptcodeSlot" slot-scope="text, record" class="beyond_hiding" style="width: 100%">
          <a-tooltip placement="topLeft">
            <template slot="title">
              <span>{{ record.acceptcode }}</span>
            </template>
            {{ record.acceptcode }}
          </a-tooltip>
        </div>

        <div slot="applynameSlot" slot-scope="text, record" class="beyond_hiding" style="width: 100%">
          <a-tooltip placement="topLeft">
            <template slot="title">
              <span>{{ record.applyname }}</span>
            </template>
            {{ record.applyname }}
          </a-tooltip>
        </div>

        <div slot="targetnameSlot" slot-scope="text, record" class="beyond_hiding" style="width: 100%">
          <a-tooltip placement="topLeft">
            <template slot="title">
              <span>{{ record.targetname }}</span>
            </template>
            {{ record.targetname }}
          </a-tooltip>
        </div>
      
        <div slot="reasonSlot" slot-scope="text, record" class="beyond_hiding" style="width: 100%">
          <a-tooltip placement="topLeft">
            <template slot="title">
              <span>{{ record.casecause }}</span>
            </template>
            {{ record.casecause }}
          </a-tooltip>
        </div>

        <span slot="operation" slot-scope="text, record">
          <template>
            <a href="javascript:;" @click="showHand(record,  '4')">详情</a>
          </template>
        </span>
      </a-table>
    </div>


    <div slot="footer" class="typical_case_box_footer">
      <a-button class="cancle_button" @click="() => isShowModal=false"><span class="cancle_button_span">取消</span></a-button>
      <a-button class="ok_button" @click=""><span class="ok_button_span">确定</span></a-button>
    </div>
  </a-modal>

  </div>


</template>

<script>
import { getAdmirePersonInfo } from '@/api/accept/apl_admreview.js'
import { getTypicalEnums, conditionQuery } from '@/api/accept/apl_typicial.js'
import storage from 'store'
import { APP_USER } from '@/store/mutation-types.js'
import { queryLastTaskidByInstid } from  '@/api/archive/apl_archive'
export default {
  props: {
    applyid: {
      type: String,
      required: true,
    },
  },
  data() {
    return {
      isShowModal: false,
      activeKey: 0,
      labelCol: { span: 4 }, // label宽
      wrapperCol: { span: 20 }, // 组件宽
      ubordered: true, // 表格边框是否显示
      ucolumns: [
        {
          title: '序号',
          width: 50,
          key: 'index',
          align: 'center',
          scopedSlots: { customRender: 'serial' },
        },
        {
          title: '相似度',
          dataIndex: 'similary',
          key: 'similary',
          width: 80,
          align: 'left',
          scopedSlots: { customRender: 'similarySlot' },
        },
        {
          title: '案号',
          dataIndex: 'acceptcode',
          key: 'acceptcode',
          width: 150,
          align: 'left',
          scopedSlots: { customRender: 'acceptcodeSlot' },
        },
        {
          title: '申请人',
          dataIndex: 'applyname',
          key: 'applyname',
          width: 150,
          align: 'left',
          scopedSlots: { customRender: 'applynameSlot' },
        },
        {
          title: '被申请人',
          dataIndex: 'targetname',
          key: 'targetname',
          width: 200,
          align: 'left',
          scopedSlots: { customRender: 'targetnameSlot' },
        },
        {
          title: '案由',
          dataIndex: 'casecause',
          key: 'casecause',
          width: 250,
          align: 'left',
          scopedSlots: { customRender: 'reasonSlot' },
        },
        {
          title: '操作',
          dataIndex: 'action',
          key: 'action',
          width: 100,
          fixed: 'right',
          scopedSlots: { customRender: 'operation' },
        }
      ],
      loading: false,
      listData: [],
      upagination: {
        // 表格分页参数
        defaultPageSize: 20,
        total: 0,
        current: 1,
        pageSize: 10,
        showTotal: (total) => `共${total}条数据`,
        showSizeChanger: true,
        pageSizeOptions: ['10', '20', '50', '100'],
      },
      queryMode: 1, // 单选框
      classify: undefined,
      queryParam: {
        f_applyid: undefined,
        f_applyname: undefined, 
        f_targetname: undefined,
        f_classify: undefined, //标签
        f_casecause: undefined, // 案由
        queryMode: 1, // 查询方式
        queryScope: 1, // 查询范围
        pageNumber: 1,
        pageSize: 10,
        f_createuserid: undefined
      },
      admireData: {},
      typicalEnums: [],
      selectTypical: [],
      currentUser: storage.get(APP_USER), // 登录人信息
    }
  },
  created() {
    this.queryAdmreview()
    this.getTypicalEnums()
    this.queryParam.f_createuserid = this.currentUser.userId
    this.queryParam.f_applyid = this.applyid
  },
  methods: {
    init() {
      this.isShowModal = true
      this.queryTypicalData()
    },
    async queryAdmreview() {
      let res = await getAdmirePersonInfo({applyid: this.applyid})
      if (res.code == 0) {
        console.log("查询成功")
        this.admireData = res.data.admreview;
        this.queryParam.f_casecause = this.admireData.reason
      } else {
        this.$message.error('查询失败')
      }
    },
    getTypicalEnums() {
      getTypicalEnums({}).then((res) => {
        if (res.code !== 0) {
          this.$message.error('查询失败')
        } else {
          this.typicalEnums = res.data
        }
      })
    },
    typicalChange(val) {
      this.selectTypical = val
      this.queryParam.pageNumber = 1
      this.queryTypicalData()
    },
    tabChange(val) {
      this.queryParam.pageNumber = 1
      this.queryTypicalData()
    },
    radioChange() {
      this.queryParam.pageNumber = 1
      this.queryTypicalData()
    },
    tableChange(upagination, filters, sorter, { currentDataSource }) {
      this.row_idx = upagination.current * upagination.pageSize - upagination.pageSize
      this.queryParam.pageNumber = upagination.current
      this.queryParam.pageSize = upagination.pageSize
      this.queryTypicalData()
    },
    queryTypicalData() {
      // 构建查询条件
      this.queryParam.f_applyname  =  this.admireData.applyname
      this.queryParam.f_targetname  =  this.admireData.targetname
      this.queryParam.f_classify  = this.classify 
      this.queryParam.queryMode  = this.queryMode
      this.queryParam.queryScope  = this.activeKey
      conditionQuery(this.queryParam).then((res) => {
        if (res.code !== 0) {
          this.$message.error('查询失败')
        } else {
          console.log("查询成功")
          this.listData = res.data.records
          this.upagination.total = res.data.total
          this.upagination.current = res.data.current
          this.upagination.pageSize = res.data.size
        }
      })
    },

    /**
     * 获取流程任务id
     */
     getTaskId(instid, callBack) {
      queryLastTaskidByInstid({"processinstanceid": instid}).then((res) => {
        if (res.code !== 0) {
          this.$message.error("获取流程实例错误")
        } else {
          let taskid = res.data
          callBack(taskid)
        }
      })
    },

    transSimilary(record) {
      if (this.queryMode == 1 || this.queryMode == 2) {
        return "---"
      } else {
        return record.similary + "%"
      }
    },

    showHand(record) {
      console.log('record', record)
      this.getTaskId(record.instid, (taskid) => {
        record.taskid = taskid;
        this.$emit("reloadRouter", record)
      })
    },
  }
}
</script>


<style lang="less" scoped>

::v-deep .ant-model {
  z-index: 10000;
}
::v-deep .ant-modal-content {
  background: #FFFFFF;
  border-radius: 12px;
}
::v-deep .ant-modal-header {
  background: #F3F4F8;
  border-radius: 12px;
}
::v-deep .ant-modal-title {
  font-weight: 600;
  color: #2C2C2C;
  font-size: 16px;
}

::v-deep .ant-form-item-label {
  font-size: 16px;
  font-family: "PingFang-SC-Heavy";
  font-weight: 800;
  color: #2C2C2C;
}


::v-deep .ant-tabs.ant-tabs-card .ant-tabs-card-bar .ant-tabs-tab-active {
    height: 40px;
    color: white;
    background: #0072c6;
    border-color: #0072c6;
    border-bottom: 1px solid #fff;
  }

  
  ::v-deep  .ant-tabs.ant-tabs-card .ant-tabs-card-bar .ant-tabs-tab {
    border-bottom-color: #0072c6;
    font-size: 18px;
    font-family: "Source Han Sans CN";
    font-weight: 500;
    padding: 0 24px;
  }

  ::v-deep .ant-tabs-bar {
    border-bottom: 1px solid #0072c6;
  }


 ::v-deep .ant-radio + span {
    font-size: 16px;
    font-family: "PingFang-SC-Heavy";
    font-weight: 600;
    color: #2C2C2C;
  }

  ::v-deep .ant-radio-inner::after {
    background-color: #03BF4B ;
  }

.typical_case_box_footer {
  > span {
    font-size: 16px;
    font-family: "PingFang-SC-Heavy";
    font-weight: 600;
  }
  .cancle_button {
    width: 100px;
    margin-right: 20px;
    height: 34px;

    .cancle_button_span {
      font-size: 16px;
      font-family: "PingFang-SC-Heavy";
      font-weight: 600;
      color: #666666;
      letter-spacing: 0em;
      margin-right: 0em;

    }
  }

  .ok_button {
    width: 100px;
    background: #0072C6;
    height: 34px;
    
    .ok_button_span {
      font-size: 16px;
      font-family: "PingFang-SC-Heavy";
      font-weight: 600;
      color: #FFFFFF;
      letter-spacing: 0em;
      margin-right: 0em;
    }
  }
}


.condition_padding {
  padding: 18px 32px !important;
}

.condition_label {
  font-size: 16px;
  font-family: "PingFang-SC-Heavy";
  font-weight: 600;
  color: #2C2C2C;
}

.table_div {
  background: #F5F7FA;
}


::v-deep .ant-table-thead > tr > th {
  background: #F5F7FA;
  padding: 16px 12px;
}

::v-deep .ant-table-column-title {
  font-size: 14px;
  font-family: "PingFang-SC-Heavy";
  font-weight: 500;
  color: #666666
}

::v-deep .ant-table-tbody > tr > td {
  font-size: 14px;
  font-family: "PingFang-SC-Heavy";
  font-weight: 800;
  color: #2c2c2c;
  padding: 14px 12px !important;
  background: #F5F7FA;
}



::v-deep .ant-table-body,
.ant-table-header {
  word-break: break-all;
  &::-webkit-scrollbar {
    width: 10px !important; /*高宽分别对应横竖滚动条的尺寸*/
    height: 10px;
  }
  &::-webkit-scrollbar-thumb {
    border-radius: 6px;
    // -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    background: #A2C6E1;
  }
  &::-webkit-scrollbar-track {
    // -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    border-radius: 5px;
    background: transparent;
  }
}

</style>